<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover"/>
    <style>
        /* 底部导航栏样式 */
        .bottom-bar {
          position: fixed;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 40px;
          line-height: 40px;
          background-color: #333;
          color: white;
          text-align: center;
          padding-bottom: calc( env(safe-area-inset-bottom));
        }

        /* 底部导航按钮样式 */
        .bottom-bar button {
          width: 20vw;
          color: white;
          background-color: transparent;
          border: none;
          outline: none;
          cursor: pointer;
        }

        /* 按钮hover效果 */
        .bottom-bar button:hover {
          background-color: #555;
        }

        .bottom-div {
            padding-bottom: calc( env(safe-area-inset-bottom));
        }
    </style>
</head>

<body>
<p id="myId">webview</p>
<button type="button" style="width:100px;height:50px" onclick="callFlutterFunction()">Click</button>
<button style="width:100px;height:50px" onclick="loadPage()">跳转子页面</button>
<p id="demo"></p>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div>活动回顾开始了活动回顾开始了活动回顾开始了活动回顾开始了</div>
<div class="bottom-div">活动回顾开始了活动回顾开始了活动回顾开始</div>
<!--<footer class="bottom-bar">
    <button onclick="homeFunction()">Home</button>
    <button onclick="favoritesFunction()">Favorites</button>
    <button onclick="settingsFunction()">Settings</button>
</footer>-->
</body>

<script>
    var count = 0;
    async function callFlutterFunction(){
      console.log("xxxJsObj:", typeof window.FlutterClient);
      JsObj.postMessage('callFlutterFunctionBack');
      console.log("xxxJsObj:", window.FlutterClient);
    }

    function callFlutterFunctionBack(result){
      console.log("xxxFlutterBack:", result);
    }

    function runJsOnly() {
      count--;
      document.getElementById("demo").innerHTML = "runJsOnly" + count;
    }

    function runJsWithResult() {
      count++;
      document.getElementById("demo").innerHTML = "runJsWithResult" + count;
      return "result from js" + count;
    }

    function loadPage() {
        window.location.href = "https://m.hnair.com";
    }

    // 按钮点击事件的处理函数
    function homeFunction() {
        console.log('Home button clicked');
        // 在这里添加导航到主页的逻辑
    }

    function favoritesFunction() {
        console.log('Favorites button clicked');
        // 在这里添加显示收藏的逻辑
    }

    function settingsFunction() {
        console.log('Settings button clicked');
        // 在这里添加显示设置页面的逻辑
    }
</script>
</html>